<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <base href="http://hefengxian.github.io/">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome...</title>

    <link rel="shortcut icon" href="assets/site/images/favicon.ico" />

    <link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/site/css/site.css">

    <script src="assets/libs/art-template/template.js"></script>
    <script src="http://cdn.bootcss.com/require.js/2.1.20/require.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="assets/libs/require-js/main-cdn.js"></script>
    <script src="assets/site/js/site.js"></script>

    <link rel="stylesheet" href="http://cdn.bootcss.com/animate.css/3.4.0/animate.min.css">
    <style media="screen">
        body {
            overflow: hidden;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        img {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .demo {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 100;
        }

        .play-buttons-wrapper {
            padding: 1em;
        }
        #info{
            margin-top: 4em;
            color: #ffffff;
            font-size: 2em;
        }
        span.animated {
            display: inline-block;
        }
    </style>
</head>
<body>
<img id="background" alt="background" src="" data-current="0"/>

<div class="demo">
    <div class="container-fluid">
        <div class="play-buttons-wrapper">
            <audio id="background_music" autoplay="autoplay" loop="loop">
                <source src="assets/site/audio/I_Miss_You.mp3">
                你的浏览器部支持audio标签
            </audio>
            <button id="music_control" class="btn btn-default" data-status="play" data-content="暂停/播放">
                <i class="fa fa-pause"></i>
            </button>
            <button id="image_pre" class="btn btn-default" data-content="切换下上个背景">
                <i class="fa fa-arrow-left"></i>
            </button>
            <button id="image_next" class="btn btn-default" data-content="切换下一个背景">
                <i class="fa fa-arrow-right"></i>
            </button>
        </div>

        <div class="container">
            <div id="info"></div>
            <br>
            <div id="jump_btn" class="text-center"></div>
        </div>
    </div>
</div>

<script src="http://cdn.bootcss.com/rainyday.js/0.1.2/rainyday.min.js"></script>
<script>
    var strings = [['车', '水', '马', '龙', '的', '都', '市', '里'],
        ['期', '待', '着', '繁', '华', '落', '幕'],
        ['只', '为', '了', '寻', '找', '寂', '静', '.', '.', '.'],
    ];

    var i = 0;
    var j = 1;
    var interval = setInterval(renderString, 500);

    function renderString() {

        var t = '<span class="a animated rotateInDownLeft">'+strings[j - 1][i++]+'</span>';
        $('#info').append(t);
        if (i >= strings[j - 1].length) {
            i = 0;
            j++;
            $('#info').append('<br>');
        }
        if(j > 3) {
            clearInterval(interval);
            setTimeout(function() {
                $('#jump_btn').append('<a href="index.html" id="start_btn" class="animated slideInDown btn btn-success btn-lg"><strong>开始</strong>&nbsp;<i class="fa fa-angle-double-right"></i></a>');
            }, 1000);

        }
    }


    var img_source = [
        {
            'engine': [[3, 3, 0.88], [5, 5, 0.9], [6, 2, 1]],
            'src': 'http://7d9jd9.com1.z0.glb.clouddn.com/0.jpg',
        },
        {
            'engine': [[0, 2, 200], [3, 3, 1]],
            'src': 'http://7d9jd9.com1.z0.glb.clouddn.com/1.jpg',
        },

        {
            'engine': [[3, 2, 2]],
            'src': 'http://7d9jd9.com1.z0.glb.clouddn.com/2.jpg',
        },
        {
            'engine': [[1, 0, 1000], [3, 3, 1]],
            'src': 'http://7d9jd9.com1.z0.glb.clouddn.com/3.jpg',
        },
    ];

    function run(index, settings) {
        var $image = $("#background"),
                image = $image[0];


        image.onload = function () {
            var engine = new RainyDay({
                image: this
            });
            engine.rain(settings[index].engine, 10);
        };
        $image.data('current', index);
        image.crossOrigin = 'anonymous';
        image.src = settings[index].src;
    }

    run(0, img_source);

    $(document).ready(function () {

        $("#image_pre").click(function() {
            var current_index = $("#background").data('current');
            var index = Number(current_index) - 1;
            if (index < 0) {
                index = img_source.length - 1;
            }
            run(index, img_source);
        });
        $("#image_next").click(function() {
            var current_index = $("#background").data('current');
            var index = Number(current_index) + 1;
            if (index > img_source.length - 1) {
                index = 0;
            }
            run(index, img_source);
        });


        $("#music_control").click(function () {
            var status = $(this).data('status');
            var icon = $(this).find('.fa');

            if (status == 'pause') {
                $("#background_music").get(0).play();
                $(this).data('status', 'play');
                icon.removeClass('fa-play');
                icon.addClass('fa-pause');
            } else {
                $("#background_music").get(0).pause();
                $(this).data('status', 'pause');
                icon.removeClass('fa-pause');
                icon.addClass('fa-play');
            }
        });
    });
</script>

</body>
</html>